﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPageVue.cshtml";
}
@this.Partial("Index-js")
<div id="app" class="topPanel">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$hits.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Edit"><i class="fa fa-pencil-square-o"></i>修改</button>
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>删除</button>
            <button class="btn btn-primary" v-on:click="Add"><i class="fa fa-plus"></i>添加</button>
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="ShowDialog('frmpwd')"><i class="fa fa-key"></i>重置密码</button>
        </div>

    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <input id="txt_keyword" type="text" class="form-control" placeholder="工号/姓名/手机" style="width: 400px;" v-model="SearchModel.keyword">
                        <span class="input-group-btn">
                            <button id="btn_search" type="button" class="btn  btn-primary" v-on:click="Search"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="table" class="table-responsive" v-cloak>
    <table class="table table-hover">
        <thead>
            <tr>
                <th style="width:20px;"></th>
                <th>账号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>手机</th>
                <th>部门</th>
                <th>岗位</th>
                <th>角色</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>备注</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="(item,index) in Models" :class="{'warning':SelectedModel == item}" v-on:click="SelectRow(item)">
                <td>{{ GetOrdinal(index) }}</td>
                <td>{{ item.UserName }}</td>
                <td>{{ item.RealName }}</td>
                <td>{{ Gender(item.Gender) }}</td>
                <td>{{ DateDay(item.Birthday)}}</td>
                <td>{{ item.MobilePhone }}</td>
                <td>{{ GetOptionTextByValue(0,item.DepartmentId) }}</td>
                <td>{{ GetOptionTextByValue(1,item.DutyId,"Id","Name") }}</td>
                <td>{{ GetOptionTextByValue(2,item.RoleId) }}</td>
                <td>{{ DateString(item.CreationTime) }}</td>
                <td>{{ item.Description }}</td>
                <td><span :class="{'badge badge-primary':item.IsEnabled,'badge badge-danger':!item.IsEnabled}">{{ GetEnable(item.IsEnabled) }}</span></td>
            </tr>
        </tbody>
        @this.Partial("_tfootVue")
    </table>


</div>
@this.Partial("_Modal")
<modal id="frmEdit" v-show="IsShow" v-on:close="IsShow = false" v-on:save="Save" v-cloak>
    <div slot="header">
        <h3>{{ Title }}</h3>
    </div>
    <div slot="body" class="modal-body">
        <form id="form1">
            <div style="padding-top: 20px; margin-right: 30px;">
                <table class="form">
                    
                    <tr>
                       

                    <td class="formTitle">账号</td>
                    <td class="formValue">
                        <input id="UserName" name="UserName" type="text" class="form-control required" placeholder="请输入账号" v-bind:readonly="EditModel!=null" v-bind:disabled="EditModel!=null" v-model="Model.UserName" />
                    </td>
                    <td class="formTitle" v-if="EditModel==null">密码</td>
                    <td class="formValue">
                        <input id="Password" name="Password" type="password" class="form-control required" placeholder="请输入密码" v-if="EditModel==null" v-model="Model.Password" />
                    </td>
                    </tr>
                    <tr>
                        <td class="formTitle">部门</td>
                        <td class="formValue">

                            <select id="DepartmentId" name="DepartmentId" class="form-control required" v-model="Model.DepartmentId" v-on:change="DeptChange(Model.DepartmentId)">

                                <option v-for="pitem in Depts" v-bind:value="pitem.Value">
                                    {{ pitem.Text }}
                                </option>
                            </select>
                        </td>
                        <td class="formTitle">岗位</td>
                        <td class="formValue">
                            <select id="DutyId" name="DutyId" class="form-control required" v-model="Model.DutyId">
                                <option v-for="pitem in Dutys" v-bind:value="pitem.Id">
                                    {{ pitem.Name }}
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">角色</td>
                        <td class="formValue">
                            <select id="RoleId" name="RoleId" class="form-control required" v-model="Model.RoleId">
                                <option v-for="pitem in Roles" v-bind:value="pitem.Value">
                                    {{ pitem.Text }}
                                </option>
                            </select>
                        </td>
                        <td class="formTitle">选项</td>
                        <td class="formValue" style="padding-top: 1px;">
                            <div class="ckbox">
                                <input id="IsEnabled" name="IsEnabled" type="checkbox" v-model="Model.IsEnabled"><label for="IsEnabled">是否启动</label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">姓名</td>
                        <td class="formValue">
                            <input id="RealName" name="RealName" type="text" class="form-control required" placeholder="请输入姓名" v-model="Model.RealName" />
                        </td>
                        <td class="formTitle">性别</td>
                        <td class="formValue">
                            <select id="Gender" name="Gender" class="form-control required" v-model="Model.Gender">
                                <option value="">--请选择--</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">手机</td>
                        <td class="formValue">
                            <input id="MobilePhone" name="MobilePhone" type="text" class="form-control" v-model="Model.MobilePhone" />
                        </td>
                        <td class="formTitle">生日</td>
                        <td class="formValue">
                            <input id="Birthday" name="Birthday" type="text" :value="Model.Birthday | yyyy_mm_dd" class="form-control input-wdatepicker Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" v-on:focus="ChangeTime()" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle">微信</td>
                        <td class="formValue">
                            <input id="WeChat" name="WeChat" type="text" class="form-control" v-model="Model.WeChat" />
                        </td>
                        <td class="formTitle">邮箱</td>
                        <td class="formValue">
                            <input id="Email" name="Email" type="text" class="form-control" v-model="Model.Email" />
                        </td>
                    </tr>
                    <tr>
                        <td class="formTitle" valign="top" style="padding-top: 5px;">
                            备注
                        </td>
                        <td class="formValue" colspan="3">
                            <textarea id="Description" name="Description" class="form-control" style="height: 60px;" v-model="Model.Description"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</modal>

<modal id="frmpwd" v-show="IsShow" v-on:close="IsShow = false" v-on:save="Save" v-cloak>
    <div slot="header">
        <h3>{{ Title }}</h3>
    </div>
    <div slot="body" class="modal-body">
        <form id="RevisePasswordForm">
            <table class="form">
                <tr>
                    <td class="formTitle">用户</td>
                    <td class="formValue">
                        <input id="UserName" name="UserName"  readonly="readonly" type="text" class="form-control" v-bind:disabled="EditModel!=null" v-model="Model.UserName" />
                    </td>
                   
                </tr>
                <tr>
                    <td class="formTitle">姓名</td>
                    <td class="formValue">
                        <input name="RealName" readonly="readonly" type="text" class="form-control" v-bind:disabled="EditModel!=null" v-model="Model.RealName" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle" >密码</td>
                    <td class="formValue">
                        <input id="Password" name="Password" type="password" class="form-control required" placeholder="请输入密码"   v-model="Model.Password" />
                    </td>
                </tr>
            </table>
            </form> 
    </div>
</modal>

